<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="format-detection" content="telephone=no">
      <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,  user-scalable=0">
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <meta name="keywords" content=" web design html template">
      <meta name="date" content="Dec 26">
      <title>Invacat- parsonal Website Template</title>
      <!--------------- favicon img --------------->
      
      <!--------------- bootstrap css --------------->
      <link rel="stylesheet" href="static/css/bootstrap.min.css">
      <!--------------- animation css --------------->
      <link rel="stylesheet" href="static/css/animation.css">
      <!--------------- venobox css --------------->
      <link rel="stylesheet" href="static/css/venobox.min.css">
      <!--------------- slick css --------------->
      <link rel="stylesheet" href="static/css/slick.css">
      <!--------------- animation heading css --------------->
      <link rel="stylesheet" href="static/css/animation-heading.css">
      <!--------------- font-awasome css --------------->
      <link rel="stylesheet" href="static/css/fontawasome.css">
      <!--------------- main css --------------->
      <link rel="stylesheet" href="static/css/style.css">
      <!--------------- responsive css --------------->
      <link rel="stylesheet" href="static/css/responsiver.css">
   </head>
   <body>
      <!-- header-area -->
      <div class="header-area">
         <div class="container-fluid">
            <div class="row">
               <!-- menu content -->
               <div class="col-lg-4">
                  <div class="invacat-header-area">
                     <div class="invacat-header">
                        <nav class="submenu-content">
                           <ul>
                              <li><a href="about.html">About</a></li>
                              <li>
                                 <a href="project.html">Work</a>
                                 <ul>
                                    <li><a href="">Project Grid</a></li>
                                    <li><a href="project.html">Project Filter</a></li>
                                    <li><a href="single-project.html">Single-Project</a></li>
                                 </ul>
                              </li>
                              <li>
                                 <a href="service.html">Service</a>
                                 <ul>
                                    <li><a href="single-service.html">Single Service</a></li>
                                    <li><a href="contact.html">Contact Page</a></li>
                                 </ul>
                              </li>
                           </ul>
                        </nav>
                     </div>
                  </div>
               </div>
               <!-- header logo  -->
               <div class="col-lg-4">
                  <div class="invacat-logo">
                     <a href="index.html"><img src="static/picture/logo.png" alt=""></a>
                  </div>
               </div>
               <!-- invacat-menu-bar -->
               <div class="col-lg-4">
                  <div class="invacat-button">
                     <div class="invacat-popupe">
                        <img src="static/picture/maneu.png" alt="">
                     </div>
                     <!-- popupe-content -->
                     <div class="popupe-menu">
                        <div class="invacat-icon">
                           <i class="fa-solid fa-xmark"></i>
                        </div>
                        <div class="popupe-discription">
                           <p>/ Contact us</p>
                           <h2>Invacat-Personal Bio info.</h2>
                           <p>Creating visual content, such as logos, brochures, infographics, and other branding materials</p>
                           <ul>
                              <li>
                                 <i class="fa-solid fa-location-dot"></i>
                                 <p>Chagrin Boulevard, OH 44124</p>
                              </li>
                              <li>
                                 <i class="fa-solid fa-envelope"></i>
                                 <p>demo@example.com</p>
                              </li>
                              <li>
                                 <i class="fa-solid fa-phone"></i>
                                 <p>+9 440 848 8222</p>
                              </li>
                           </ul>
                        </div>
                        <a class="invacat-button-popupe" href="contact.html">
                           <p>Get in touch</p>
                           <i class="fa-solid fa-arrow-right"></i>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- header end -->
      <!-- mobile menu -->
      <div id="invacat-mobile-nav">
         <div class="invact-logo">
            <div class="logo">
               <a href="index.html"><img src="static/picture/logo-i-w.png" alt=""></a>
            </div>
            <div class="menu-button"><span class="fa-solid fa-bars"></span></div>
         </div>
         <!-- mobile menu content -->
         <ul>
            <li><a href="about.html">About</a></li>
            <li class="parent">
               <a href="project.html">Work</a>
               <ul>
                  <li><a href="">Project Grid</a></li>
                  <li><a href="project.html">Project Filter</a></li>
                  <li><a href="single-project.html">Single-Project</a></li>
               </ul>
            </li>
            <li class="parent">
               <a href="service.html">Service</a>
               <ul>
                  <li><a href="single-service.html">Single Service</a></li>
                  <li><a href="contact.html">Contact Page</a></li>
               </ul>
            </li>
         </ul>
      </div>
      <!-- End Mobile Menu -->
      <!-- breadcrumb area -->
      <div class="breadcrumb-area">
         <div class="container">
            <div class="row">
               <div class="col-lg-12">
                  <div class="breadcrumb-content">
                     <div class="breadcrumb-title">
                        <h1>Grid Project</h1>
                     </div>
                     <div class="breadcrumb-menu">
                        <nav aria-label="breadcrumb">
                           <ol class="breadcrumb text-aling-center">
                              <li class="breadcrumb-item"><a href="#">Home</a></li>
                              <li class="breadcrumb-item active" aria-current="page">Project</li>
                           </ol>
                        </nav>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- breadcrumb end -->
      <!-- project area -->
      <div class="project-area project-page">
         <div class="container">
            <div class="row project-active">
               <!-- single-project 01 -->
               <div class="col-xxl-6 col-lg-6 col-md-6 col-xl-6 project-item Javascript">
                  <div class="single-project">
                     <div class="project-content">
                        <h2><a href="#">Sport management</a></h2>
                        <p>Sport club</p>
                        <div class="project-btn">
                           <a href="#">View live demo<i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                     </div>
                     <img src="static/picture/project01.png" alt="">
                  </div>
               </div>
               <!-- single-project 02 -->
               <div class="col-xxl-6 col-lg-6 col-md-6 col-xl-6 project-item Sass WordPress Javascript">
                  <div class="single-project">
                     <div class="project-content">
                        <h2><a href="#">eBook online shop</a></h2>
                        <p>Library</p>
                        <div class="project-btn">
                           <a href="#">View live demo<i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                     </div>
                     <img src="static/picture/project02.png" alt="">
                  </div>
               </div>
               <!-- single-project 03 -->
               <div class="col-xxl-6 col-lg-6 col-md-6 col-xl-6 project-item Sass WebDesign">
                  <div class="single-project">
                     <div class="project-content">
                        <h2><a href="#">Art design</a></h2>
                        <p>Art, design</p>
                        <div class="project-btn">
                           <a href="#">View live demo<i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                     </div>
                     <img src="static/picture/project03.png" alt="">
                  </div>
               </div>
               <!-- single-project 04 -->
               <div class="col-xxl-6 col-lg-6 col-md-6 col-xl-6 project-item Sass WebDesign">
                  <div class="single-project">
                     <div class="project-content">
                        <h2><a href="#">Business club</a></h2>
                        <p> Design</p>
                        <div class="project-btn">
                           <a href="#">View live demo<i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                     </div>
                     <img src="static/picture/project04.png" alt="">
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- peoject end -->
      <!-- footer area -->
      <div class="footer-area">
         <div class="container">
            <div class="row">
               <!-- about-content -->
               <div class="col-lg-4 col-md-6">
                  <div class="single-about">
                     <div class="about-content">
                        <h2>About us</h2>
                        <p>Working exclusively as a quarespace design and developer since early 2016, and my know ledge as a front-end developer all to push this platform further.</p>
                     </div>
                     <div class="abouts-icon">
                        <ul>
                           <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
                           <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
                           <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                        </ul>
                     </div>
                  </div>
               </div>
               <!-- newslatter -->
               <div class="col-lg-4 col-md-6 footer-contact">
                  <div class="call-number">
                     <div class="call-address">
                        <img src="static/picture/Comment.png" alt="">
                        <p>If you have questions you can contact us?</p>
                        <a href="contact.html">Contact us</a>
                     </div>
                     <div class="call-num">
                        <p>Or call us</p>
                        <h2>+1 800 642 94 31</h2>
                     </div>
                  </div>
               </div>
               <!-- quick-link -->
               <div class="col-lg-4 col-md-6">
                  <div class="quick-link">
                     <h2>Quick Link</h2>
                     <ul>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Privicy</a></li>
                        <li><a href="#">Free website </a></li>
                        <li><a href="#">Careear</a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- footer end -->
      <!---------------------  JS area --------------------------->
      <script src="static/js/jquery.min.js"></script>
      <!--------------------- bootstrap js --------------------------->
      <script src="static/js/bootstrap.min.js"></script>
      <!--------------------- slick js --------------------------->
      <script src="static/js/slick.min.js"></script>
      <!--------------------- waypoint js --------------------------->
      <script src="static/js/waypoint.js"></script>
      <!--------------------- counterup js --------------------------->
      <script src="static/js/counterup.min.js"></script>
      <!--------------------- animation-heading js --------------------------->
      <script src="static/js/animation-heading.js"></script>
      <!--------------------- ajax-mail js --------------------------->
      <script src="static/js/ajax-mail.js"></script>
      <!--------------------- venobox js --------------------------->
      <script src="static/js/venobox.min.js"></script>
      <!--------------------- circle-progress js --------------------------->
      <script src="static/js/circle-progress.js"></script>
      <!--------------------- circle-progress js --------------------------->
      <script src="static/js/jquery.scrollUp.js"></script>
      <!--------------------- scrollUp js --------------------------->
      <script src="static/js/isotope.pkgd.min.js"></script>
      <!--------------------- main js --------------------------->
      <script src="static/js/main.js"></script>
   </body>
</html>